<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <script src="Metro/build/js/jquery.js"></script>
    <script src="Metro/build/js/metro.js"></script>
    <link rel="stylesheet" type="text/css" href="Metro/build/css/metro.css">
    <link rel="stylesheet" type="text/css" href="Metro/build/css/metro-schemes.min.css">
    <link rel="stylesheet" type="text/css" href="Metro/build/css/metro-icons.min.css">
    <link rel="stylesheet" type="text/css" href="table/css/zm.css">
    <link rel="stylesheet" type="text/css" href="table/css/_zmTable.css">
    <script src="http://rap.taobao.org/rap.plugin.js?projectId=2216"></script>
</head>

<body ng-app="webapp" ng-controller="test">
    <zutable zu-table="zutable" zu-filterid="filterid" zu-url="dataurl"></zutable>
    <hr>
    <h1><a href="./interface.html" target="_blank">查看数据定义</a></h1>
</body>
<script data-baseurl="./" data-main="main.js" src="js/require.js" id="main"></script>
<script type="text/javascript">
var app = angular.module('webapp', []);

app.controller('test', function($scope, $location) {
    $scope.zutable;
    $scope.dataurl = "/api/rest/v3/workspaces/100/models/100/";
    $scope.filterid = "100";
    //由于表格组件是异步加载，所以这里需要等待一段时间或者用循环来判断zutable是否已经被实例化
    setTimeout(function() {
        $scope.$apply(function() {
            $scope.zutable.defineTableName("hahaha");
        });
    }, 2000);
});
</script>
<!--表格元素代码-->
<script type="text/javascript">
var baseurl = "."; //从require配置的baseUrl中出发走到table文件夹的路径

function checkNull(obj) {
    if (obj == undefined || obj == null || obj == "" || obj.length <= 0)
        return true;
    return false;
}

//将传入的html内容转成html
app.directive('compile', function($compile) {
    // directive factory creates a link function
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);
                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
});

//自动表格命令
app.directive('zutable', function() {
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        scope: { //用来隔离表格的scope，使得与父类scope不在一个作用域里
            zutable: "=zuTable", //使得父类通过这个参数来和标签通信,目的：暴露api接口对象，左边为标签作用域变量，右边为标签属性，=表示通过在属性中加入父类scope里的变量来绑定，
            Fid: "=zuFilterid", //过滤器对象与规则
            baseDataUrl: "=zuUrl", //数据接口地址的公共部分
        }, // {} = isolate, true = child, false/undefined = no change
        controller: function($scope, $element, $attrs, $transclude, $q, $location) { //调用顺序,2
            $scope.zutable = undefined;
            $scope.Fid; //过滤器对象与规则
            $scope.baseDataUrl;
            $scope.objId = $attrs["zuTable"]; //用来保证实例化对象的唯一性

            //当过滤器id变化，则刷新表格
            $scope.$watch('Fid', function(newValue, oldValue, scope) {
                if (newValue != oldValue) {
                    // initTable();
                    $scope.zutable.defineGetTableBodyUrl($scope.baseDataUrl + "rows/filter/" + $scope.Fid + "/");
                    $scope.zutable.defineGetSingleDataUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.defineDeleteDatasUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.defineSaveSingleDataUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.defineDeleteSingleDataUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.tableRefresh();
                }
            });

            $scope.$watch('baseDataUrl', function(newValue, oldValue, scope) {
                if (newValue != oldValue) {
                    // initTable();
                    $scope.zutable.defineGetTableBodyUrl($scope.baseDataUrl + "rows/filter/" + $scope.Fid + "/");
                    $scope.zutable.defineGetSingleDataUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.defineDeleteDatasUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.defineSaveSingleDataUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.defineDeleteSingleDataUrl($scope.baseDataUrl + "rows/");
                    $scope.zutable.tableRefresh();
                }
            });

            if (checkNull($scope.Fid)) {
                console.warn("请指定过滤器id,或者设置缺省值");
                // $scope.Fid = 0;
            }

            if (checkNull($scope.baseDataUrl)) {
                console.warn("请指定地址获取地址,或者设置缺省值");
                $scope.baseDataUrl = baseurl + "table/data.json";


                //加载表格js文件（异步方式)
                require([baseurl + "/table/_zuTable.js?id=" + $scope.objId], function(table) {
                    table.initVarible($scope, $q, $location);
                    table.defineTableName("缺省");
                    table.defineGetTableBodyUrl($scope.baseDataUrl);
                    table.initFunctions(); //初始化表格
                });

                return;
            }

            function initTable() {
                //加载表格js文件（异步方式)
                require([baseurl + "/table/_zuTable.js?id=" + $scope.objId], function(table) {
                    table.initVarible($scope, $q, $location);
                    table.defineTableName("");
                    table.defineGetTableBodyUrl($scope.baseDataUrl + "rows/filter/" + $scope.Fid + "/");
                    table.defineGetSingleDataUrl($scope.baseDataUrl + "rows/");
                    table.defineDeleteDatasUrl($scope.baseDataUrl + "rows/");
                    table.defineSaveSingleDataUrl($scope.baseDataUrl + "rows/");
                    table.defineDeleteSingleDataUrl($scope.baseDataUrl + "rows/");
                    table.initFunctions(); //初始化表格
                });
            }

            initTable();
        },
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        restrict: 'E', // E = Element(用作标签名), A = Attribute（用作属性）, C = Class（用作类）, M = Comment（用作注释）
        // template: '<div>fdsfdsfd</div>',
        templateUrl: function(a, $attrs) {
            return baseurl + "/table/_zuTable.html";
        },
        // replace: true,
        // transclude: true,//嵌套其他自定义标签
        compile: function(tElement, tAttrs) { //调用顺序,1
            //some code ....
            // console.log("conplile")
            return {
                pre: function($scope, iElm, iAttrs, controller) { //pre-link:在complile完后调用,调用顺序,3
                    // console.log("pre")
                },
                post: function($scope, iElm, iAttrs, controller) { //post-link:在最后调用,调用顺序,4
                    // console.log("post")
                }
            }
        },
    };
});
</script>

</html>
